import React from 'react';

export default class Handler extends React.Component {
  // 3. 在构造函数中, 想访问props, 必须将props传递给 constructor
  constructor(props) {
    super(props);
    console.log(props.name)
    console.log(props.age)
    
    // 4. 如果需要使用this的方式来访问传递的属性, 需要将数据传递给super
    console.log(this.props.name)
    console.log(this.props.age)
  }
  render() {
    return (
      <div>
        <p>我是类组件, 用this.props来接收组件使用者传递的参数</p>
        <p>我的名字是: {this.props.name}, 我的年龄是: {this.props.age}</p>
        {/* 1. props可以传递任意类型的数据 */}
        <p>我是传递过来的Boolen值: { this.props.bol +1 }</p>
        <p>我是传递过来的span标签: {this.props.htmlJsx}</p>
        <p>我是传递过来的函数: {this.props.fn()}</p>
        <p>
          <button onClick={() => {
            // 2. peops是只读的, 不能对props进行修改
            // this.props.age = this.props.age + 1
          }}>修改props</button>
        </p>
      </div>
    )
  }
}